<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>点菜</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="__INDEX__/css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="__INDEX__/css/style.css" />
<link rel="stylesheet" href="__INDEX__/css/diancan.css" />
<link rel="stylesheet" href="__INDEX__/css/iconfont.css" />
<style>
	.record_nav {
    background: #EEEEEE;
    padding: 3%;
    font-size: 14px;
	}
	.record_list .list_nam, .record_list2 .list_nam {
    font-size: 14px;
    color: #333333;
	}
	.record_list li, .record_list2 li {
    border-bottom: 1px solid #E7E7E7;
    padding: 3%;
}
	.mui-views,.mui-view,.mui-pages,.mui-page,.mui-page-content {position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background-color: #FFFFFF;}	
	.mui-pages {top: 46px; height: auto;}	
	.mui-scroll-wrapper,.mui-scroll {background-color: #FFFFFF;}	
	.mui-page.mui-transitioning {-webkit-transition: -webkit-transform 300ms ease; transition: transform 300ms ease;}	
	.mui-page-left {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}	
	.mui-ios .mui-page-left {-webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0);}	
	.mui-navbar {position: fixed; right: 0; left: 0; z-index: 10; height: 44px;  min-width: 320px; max-width: 640px; margin: 0 auto;}	
	.mui-navbar .mui-bar {position: absolute; text-align: center;}	
	.mui-android .mui-navbar-inner.mui-navbar-left {opacity: 0;}	
	.mui-ios .mui-navbar-left .mui-left,.mui-ios .mui-navbar-left .mui-center,.mui-ios .mui-navbar-left .mui-right {opacity: 0;}	
	.mui-navbar .mui-btn-nav {-webkit-transition: none; transition: none; -webkit-transition-duration: .0s; transition-duration: .0s;}	
	.mui-navbar .mui-bar .mui-title {display: inline-block; width: auto;}	
	.mui-page-shadow {position: absolute; right: 100%; top: 0; width: 16px; height: 100%; z-index: -1; content: '';}	
	.mui-page-shadow {background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%); background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);}	
	.mui-navbar-inner.mui-transitioning, .mui-navbar-inner .mui-transitioning {-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease; transition: opacity 300ms ease, transform 300ms ease;}	
	.mui-page {display: none;}	
	.mui-pages .mui-page {display: block;}	
	.mui-page .mui-table-view:first-child {margin-top: 15px;}	
	.mui-page .mui-table-view:last-child {margin-bottom: 30px;}	
	.mui-table-view {margin-top: 20px;}	
	.mui-table-view span.mui-pull-right {color: #999;}	
	.mui-table-view-divider {background-color: #efeff4;font-size: 14px;}	
	.mui-table-view-divider:before,.mui-table-view-divider:after {height: 0;}	
	.head-img {width: 40px; height: 40px;}	
	#head-img1 {position: absolute;bottom: 10px;right: 40px;width: 40px;height: 40px;}	
	.update {font-style: normal;color: #999999;margin-right: -25px;font-size: 15px;}	
	.mui-fullscreen {position: fixed;z-index: 20;background-color: #000;}	
	.mui-ios .mui-navbar .mui-bar .mui-title {position: static;}
	/*问题反馈在setting页面单独的css*/	
	#feedback .mui-popover {position: fixed;}	
	#feedback .mui-table-view:last-child {margin-bottom: 0px;}	
	#feedback .mui-table-view:first-child {margin-top: 0px;}	
	.container-fill {padding: .5em;}	
	.text-muted {color: #ddd;}	
	.text-orange {color: #f15a0c;}	
	h4 {margin: 5px 0;}	
	h4:first-of-type {margin-top: 10px;}	
	.panel {padding: .5em .5em .5em; margin-bottom: 0;}	
	.nav.nav-tabs {padding: 5px 0 0;}	
	.alert .form-group {margin-bottom: 0;}	
	label.form-group {display: block;}	
	label.form-group {font-weight: normal;overflow: hidden;border-top: 1px #DDD solid;padding-top: 10px;padding-bottom: 0;margin-bottom: 0;}	
	label.form-group .col-xs-2 {margin-top: 0px;}	
	label.form-group .col-xs-2 i {margin-top: 10px;}	
	label.form-group input[name="type"] {opacity: 0;width: 0;}	
	.pay-info p.bb {border-top: 1px #ddd dashed;padding: 10px 5px 0px; font-size: .85rem;}	
	.pay-info p.bb:last-child{border-bottom: 1px #ddd dashed; padding-bottom: 10px; margin-bottom: 0;}
	.pay-info p.b1 {padding: 0px 5px;}	
	a.btn.btn-block.js-pay {margin: 12px 0;}
	/*问题反馈在setting页面单独的css==end*/		
</style>
</head>
	<body>
		<!--页面主结构开始-->
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="setting" class="mui-page">
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">点菜</h1>
			</div>
			<!--页面标题栏结束-->
			<!--页面主内容区开始-->
			<div class="mui-page-content">
				<div class="mui-content mui-row  dianc_cp" style="padding-top:0px;height: 100%;">
					<div class="mui-col-xs-3" style="height: 100%;">
						<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
						</div>
					</div>
					<div id="segmentedControlContents" class="mui-col-xs-9 dianc_col" style="height: 100%;border-left: 1px solid #c8c7cc;">
					</div>
				</div>
				<div class="dianc_bnav clearfix">
					<div class="dianc_bnav_l"><span class="iconfont icon-dingdan"></span>共<em id="total_num">0</em>份<span>¥<em id="total_price">0</em></span></div>
					<div id="dianc_bnav_btn" class="dianc_bnav_btn">
						<a href="#about" class="mui-navigate-right">选好了</a>
					</div>
				</div>
			</div>
		</div>

		<div id="about" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">已点菜单</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="record_nav clearfix">
							<li class="name">菜品</li>
							<li class="pri">价格</li>
							<li class="num">数量</li>
							<li class="xiaoj">小计</li>
						</ul>
						<ul id="record_list2" class="record_list2">
						</ul>

				<div class="dchj_box">合计<span id="comfirm_price"></span></div>
						<div class="dco_beiz"><textarea id="memo" placeholder="备注信息"></textarea></div>
						<div id="confirm_order">
							<a href="#" onclick="qr_order(this)"  class=" mui-btn mui-btn-primary">确认订单</a>
						</div>
					</div>
				</div>
			</div>
		</div>
</html>

<script type="text/javascript" src="__INDEX__/js/jquery.min.js"></script>
<script type="text/javascript" src="__INDEX__/js/layer/layer.min.js"></script>
<script src="__INDEX__/js/mui.min.js"></script>
<script src="__INDEX__/js/mui.view.js"></script>
<script type="text/javascript" src="__INDEX__/js/app.js"></script>
<script>
	mui.init();
	//初始化单页view
	var viewApi = mui('#app').view({
		defaultPage: '#setting'
	});
	var controls = $("#segmentedControls");
	var contents = $("#segmentedControlContents");
	var cartlist = {};
	var index = layer.load(0, {shade: false,time: 10 * 1000});
	var view = viewApi.view;
	var member = JSON.parse(localStorage.getItem('member'));
	function change_num(){
		var value = $("#room_num").val();
		if(value <= 0) {
			$("#room_num").val(1);
		}
	}
	(function($) {
		//处理view的后退与webview后退
		var oldBack = $.back;
		$.back = function() {
			if(viewApi.canBack()) { //如果view可以后退，则执行view的后退
				viewApi.back();
			} else { //执行webview后退
				oldBack();
			}
		};
		//监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
		//第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
		view.addEventListener('pageBeforeShow', function(e) {
			var id = e.detail.page.id;
			if(id == "about") {
				var list = document.getElementById("record_list2");
				var html = "";
				if(JSON.stringify(cartlist) != "{}") {
					for(var i in cartlist) {
						var gd = cartlist[i];
						html += '<li class="less clearfix">' +
							'<div style="width: 35%;float:left;">' +
							'<p class="list_nam">' + gd.name + '</p>' +
							'</div>' +
							'<div style="width: 25%;float:left;">￥' + gd.price + '/份</div>' +
							'<div  style="width: 20%;float:left;text-align:center;">' + gd.num + '&nbsp;&nbsp;</div>' +
							'<div  style="width: 20%;float:left;">' + gd.total_price + '￥&nbsp;&nbsp;</div>' +
							'</li>';
					}
					var total_price=parseFloat(document.getElementById("total_price").innerText);
					document.getElementById("comfirm_price").innerText="￥"+total_price;
					document.getElementById("confirm_order").style.display="block";
				} else {
					html += '<li class="less clearfix">没有添加商品哦~!~</li>';
					document.getElementById("confirm_order").style.display="none";
				}
				list.innerHTML = html;
			}else if(id=="pay"){
				
			}
		});
		view.addEventListener('pageShow', function(e) {
			//				console.log(e.detail.page.id + ' show');
		});
		view.addEventListener('pageBeforeBack', function(e) {
			//				console.log(e.detail.page.id + ' beforeBack');
		});
		view.addEventListener('pageBack', function(e) {
			//				console.log(e.detail.page.id + ' back');
		});
	})(mui);
	function qr_order(obj){
			
			if(JSON.stringify(cartlist) != "{}") {
					var total_price=parseFloat(document.getElementById("total_price").innerText);
					var loading = layer.load(0, {shade: false,time: 5 * 1000});
					$(obj).attr("disabled","disabled");
					$.ajax({
						url:'/index/member/add_dc',
						data: {
							r_id:"{$r_id}",
							ren:0,
							store_id:"{$store_id}",
							cart:cartlist
						},
						success: function(data) {
							if(data.code==200){
								window.location.href="/index/member/reserve_det2?r_id={$r_id}";
							}else{
								layer.msg("下单失败请刷新再试");
							}
						}
					})
	
				} else {
					layer.msg("您得菜品空空也!");
				}
	}
	$.ajax({
			url:'/index/member/getdc',
			data: {
				store_id:"{$store_id}"
			},
			success: function(data) {
				var res = data.res;
				var type = data.type;
				if(res != null) {
					var append_type = "";
					var append_good = "";
					var count = 0;
					for(var r in res) {
						var clas = "";
						var goods = res[r];
						if(count == 0) {
							clas = "mui-active";
						}
						count++;
						append_type += '<a class="mui-control-item ' + clas + '" href="#content' + r + '">' + type[r]['name'] + '</a>';
						append_good += '<div id="content' + r + '" class="mui-control-content ' + clas + '">' +
							'<ul class="dianc_cplist">';
						if(goods != null) {
							for(var g in goods) {
								var gd = goods[g];
								append_good += '<li class="clearfix">' +
									'<div class="dianc_cpimg"><img src="'+gd['thumb']+'"></div>' +
									'<div class="dianc_cpinfo">' +
									'<p class="dianc_cpnam">' + gd['name'] + '</p>' +
									'<div class="dianc_pribox clearfix">' +
									'<span class="dianc_cppri"><em>¥' + gd['price'] + '</em>/份</span>' +
									'<div class="mui-numbox"  data-name=' + gd['name'] + ' data-id=' + gd['id'] + ' data-price=' + gd['price'] + '>' +
									'<div class="mui-btn mui-btn-numbox-minus"><span class="iconfont icon-jian"></span></div>' +
									'<input disabled="disabled" class="mui-input-numbox" type="number" value=0 />' +
									'<div class="mui-btn mui-btn-numbox-plus"><span class="iconfont icon-icontianjia01"></span></div>' +
									'</div>' +
									'</div>' +
									'</div>' +
									'</li>';
							}
						} else {
							append_good += '<li class="clearfix">空空的什么嘟木有~!~</li>';
						}
						append_good += '</ul>' +
							'</div>';
					}
					controls.html(append_type);
					contents.html(append_good);
					setEvent();
					layer.close(index);
				}
			}
		})
		/**
		 * 改变商品数量
		 * @type 1加 2减
		 */
	function change_goods(obj, type) {
		var parent = $(obj).parent();
		var id = parent.data("id");
		var name = parent.data('name');
		var unit = "份";
		var price = parseFloat(parent.data("price"));
		var cart = cartlist[id];
		var inp = parent.find('input');
		var inp_num = parseFloat(inp.val());
		var t = $("#total_num");
		var total_num = parseFloat(t.text());
		var t1 = $("#total_price");
		var total_price = parseFloat(t1.text());
		if(cart != null) {
			if(type == 1) {
				cartlist[id]['num'] = cartlist[id]['num'] + 1;
				cartlist[id]['total_price'] = parseFloat(cartlist[id]['total_price']) + parseFloat(price);
				inp.val(inp_num + 1);
				t.text(total_num + 1);
				t1.text(total_price + price);
			} else {
				if(inp_num <= 0) {
					inp.val(0);
					return;
				} else {
					inp.val(inp_num - 1);
					if(inp_num == 1) {
						delete(cartlist[id]);
					}else{
						cartlist[id]['num'] = inp_num - 1;
						cartlist[id]['total_price'] = parseFloat(cartlist[id]['total_price']) - parseFloat(price);
					}
				}
				if(total_num <= 0) {
					return;
				} else {
					t.text(total_num - 1);
					t1.text(total_price - price);
				}
			}
		} else {
			if(type == 2) {
					return;
			}
			var arr = {};
			arr['id'] = id;
			arr['name'] = name;
			arr['price'] = price;
			arr['total_price'] = price;
			arr['num'] = 1;
			arr['unit'] = unit;
			cartlist[id] = arr;
			inp.val(inp_num + 1);
			t.text(total_num + 1);
			t1.text(total_price + price);
		}
	}

	function setEvent() {
		$(".mui-btn-numbox-plus").click(function() {
			change_goods(this, 1);
		})
		$(".mui-btn-numbox-minus").click(function() {
			change_goods(this, 2);
		})
	}
	$(".btn-primary").click(function() {
				$(".modal").addClass("in");
				$(".modal").show();
			})
			$(".js-m").click(function() {
				var pay_type=$(this).data("type");
				var act="alipay";
				var jstype="html";
				var openid=0;//member['openid'];
				if(openid==""){
					openid=localStorage.getItem("openid");
				}
				if(pay_type==2){
//					$("#payform").submit();
//					return;
//					window.location="http://test.ilong3.cn/index/payment/wechat";
//					return;
					act="wechat";
					jstype="jsonp";
				}else if(pay_type==4){
					act="unionpay";
				}
				var isyy=getUrlParam("isyy");
				var type='diancan';//点餐
				var dt= {
						WIDout_trade_no: $("#order_no").text(),
						WIDsubject: "点餐消费",
						WIDtotal_fee: $("#pay_money").text(),
						WIDshow_url: 'www',
						WIDbody: '点餐消费',
						order_ids:0,
						uid:getUid(),
						type:type,
						house_id:getUrlParam("id"),
						message:$("#memo").val(),
						user_type:1,
						isyy:isyy,
						agent_id:getUrlParam("store_id"),
						token:'cheshi',//member['token'],
						openid:openid,
						pay_type:pay_type,
						cart:cartlist
						,return_url:"http://sy.cn/success.html"
				};
				$.ajax({
					url: APP.api_url + 'Payment/'+act,
					data:dt,
					type: "post",
					dataType:jstype,
					jsonp:'callback',  
					jsonpCallback :'jsonpCallback',
					success: function(data) {
						if(pay_type==2){
							callpay(data);
						}else{
							$("#callback").append(data);
						}
						if(pay_type==4){
							$("#pay_form").submit();
						}
					}
				})
			})
		function jsonpCallback(data){
			
		}
			//调用微信JS api 支付
		function jsApiCall(jsApiParameters) {
			WeixinJSBridge.invoke('getBrandWCPayRequest', jsApiParameters,
				function(res) {
					if(res.err_msg == "get_brand_wcpay_request:ok") {
						layer.msg('付款成功！', {
						  time: 1000
						}, function(){
							location.href="/member/orders.html";
						});
					} else {
						layer.msg('付款失败');
					}
				}
			);
		}	
		function callpay(jsApiParameters) {
			console.log(jsApiParameters);
			if(typeof WeixinJSBridge == "undefined") {
				if(document.addEventListener) {
					document.addEventListener('WeixinJSBridgeReady', jsApiCall(jsApiParameters), false);
				} else if(document.attachEvent) {
					document.attachEvent('WeixinJSBridgeReady', jsApiCall(jsApiParameters));
					document.attachEvent('onWeixinJSBridgeReady', jsApiCall(jsApiParameters));
				}
			} else {
				jsApiCall(jsApiParameters);
			}
		}
	//	//默认选中第一个
	//	controls.querySelector('.mui-control-item').classList.add('mui-active');
	//	contents.querySelector('.mui-control-content').classList.add('mui-active');
</script>